<template>
  <div id="app">
    <MyHeader :addTodo="addTodo"></MyHeader>
    <MyList :todos="todos" :checkTodo="checkTodo" :remove="remove"></MyList>
    <MyFlout :todos="todos" :checkAll="checkAll" :clearAllSuccess="clearAllSuccess"></MyFlout>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader"
import MyList from "@/components/MyList.vue"
import MyFlout from "@/components/MyFlout.vue";

export default {
  name: 'App',
  methods: {
    // 勾选或取消勾选
    checkTodo(id){
      this.todos.forEach(item => {
        if(item.id === id){
          item.done = !item.done
        }
      })
    },
    // 添加
    addTodo(todoObject) {
      this.todos.unshift(todoObject)
    },
    remove(todoId){
      this.todos = this.todos.filter(todo => {
        return todo.id !== todoId;
      })
    },
    checkAll(value){
      this.todos.forEach(todo => {
        todo.done = value
      })
    },
    clearAllSuccess(){
      this.todos = this.todos.filter(todo => {
        return !todo.done
      })
    }
  },
  components: {
    MyHeader,
    MyList,
    MyFlout
  },
  data() {
    return {
      todos: [
        {id: '001', title: '抽烟', done: true},
        {id: '002', title: '喝酒', done: false},
        {id: '003', title: '开车', done: true}
      ]
    }
  },
  mounteds: {

  },
}
</script>

<style>
</style>
